<template>
    <div class="await">
        <div class="contentbox">
            <div class="timer">
                <div class="clock" :class="initTime>3?'':'clock321'">
                    <div class="num" :class="initTime>3?'':'num321'">{{initTime}}</div>
                </div>
            </div>
            <div class="title">已连接，等待玩家加入...</div>
            <div class="headzone">
                <div class="item" v-for="(item,index) in robotList" :key="index">
                    <div class="avatar" :class="!item.avatar?'':index>1?'avatarB':'avatarA'">
                        <div class="pic">
                            <img :src="item.avatar ? item.avatar : headError" :onerror="headError">
                        </div>
                    </div>
                    <div class="truename">{{item.name?item.name:'???'}}</div>
                </div>
            </div>
            <div class="pkicon"></div>
        </div>
    </div>
</template>

<script>
import * as api from '@/api/index';
export default {
    data(){
        return{
            userinfo:JSON.parse(localStorage.getItem("userInfo")),
            initTime:5,
            setInitTime:null,
            headError: this.$store.state.headError,
            robotList:[],
            roomid:this.$route.query.roomid
        }
    },
    mounted(){
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        this.Timereduce()
        this.getRobotList()
    },
    methods:{
        goBack(){
			window.removeEventListener('popstate', this.goBack, false);
			this.$router.push({path:'/pkgame'})
		},
        Timereduce(){
            this.setInitTime=setInterval(()=>{
                this.initTime--
                if(this.initTime==0){
                    clearInterval(this.setInitTime)
                    this.setInitTime=null
                    this.$router.replace({path:'/pkanswer',query:{roomid:this.roomid}})
                    return
                }
            },1000)
        },
        async getRobotList(){
            this.robotList.push({name:this.userinfo.sstUserTruename,avatar:this.userinfo.userAvatar})
            var res=await api.getRobotListRandom()
            if(res.resultCode==1){
                for(var i=0;i<res.value.length;i++){
                    this.robotList.push({name:res.value[i].robotName,avatar:res.value[i].avater})
                }
            }else {
                this.$LayerTip({
                content:res.resultMessage,
                time: 1500
                });
            }
            var len=this.robotList.length
            if(len<4){
                for(var j=len;j<4;j++){
                    this.robotList.push({name:'',avatar:''})
                }
            }
            localStorage.setItem('robotList',JSON.stringify(this.robotList))
        }
    },
    destroyed(){
        clearInterval(this.setInitTime)
        this.setInitTime=null
    }
}
</script>

<style lang="scss" scoped>
.await{
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/pk/awaitbg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 2.4rem;
    .contentbox{
        width: 6.62rem;
        height: 9rem;
        border-radius: .4rem;
        background: #ffffff;
        margin: 0 auto;
        box-shadow: 0 .08rem .04rem 0 rgba($color: #0b3ff3, $alpha: .8);
        position: relative;
        .timer{
            position: absolute;
            width: 2rem;
            height: 2rem;
            border-radius: 50% 50%;
            top: -0.8rem;
            left: 50%;
            transform: translateX(-50%);
            background: #ffffff;
            padding-top: .16rem;
            .clock{
                position: relative;
                width: 1.68rem;
                height: 1.68rem;
                margin: 0 auto;
                background: url(~@/assets/img/pk/clock.gif) no-repeat;
                background-size: 100% 100%;
                &.clock321{
                    background: url(~@/assets/img/pk/clock321.gif) no-repeat;
                    background-size: 100% 100%;
                }
                .num{
                    width: 1.2rem;
                    height: 1.2rem;
                    border-radius: 50% 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    background: #02affe;
                    color: #ffffff;
                    font-size: .72rem;
                    text-align: center;
                    line-height: 1.2rem;
                    &.num321{
                        background: #ffd300;
                    }
                }
            }
        }
        .title{
            padding-top: 1.32rem;
            color: #333333;
            font-size: .36rem;
            text-align: center;
        }
        .headzone{
            width: 100%;
            height: 100%;
            .item{
                width: 50%;
                float: left;
                height: 2.9rem;
                padding-top: .75rem;
                font-size: .3rem;
                color: #333333;
                text-align: center;
                .avatar{
                    width: 1.72rem;
                    height: 1.72rem;
                    border-radius: 50% 50%;
                    border: .1rem solid #d9dfe5;
                    position: relative;
                    margin: 0 auto;
                    &.avatarA{
                        border: .1rem solid #02affe;
                    }
                    &.avatarB{
                        border: .1rem solid #ff67a1;
                    }
                    .pic{
                        width: 1.52rem;
                        height: 1.52rem;
                        border-radius: 50% 50%;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                        img{
                            border-radius: 50% 50%;
                        }
                    }
                }
                .truename{
                    padding-top: .15rem;
                }
            }
        }
        .pkicon{
            width: 1rem;
            height: 1.15rem;
            position: absolute;
            top: 4.22rem;
            left: 50%;
            transform:translateX(-50%);
            background: url(~@/assets/img/pk/PK.gif) no-repeat;
            background-size: 100% 100%;
        }
    }
}
</style>

